<template>
  <div class="container">
    <div class="header">添加用户</div>
    <el-input
      style="margin-bottom: 16px"
      placeholder="请输入要注册的账号"
      v-model="sign.user"
    >
      <template #prepend>账号</template>
    </el-input>
    <el-input
      style="margin-bottom: 16px"
      placeholder="请输入用户密码"
      v-model="sign.passwd"
    >
      <template #prepend>密码</template>
    </el-input>
    <div style="display: flex">
      <el-input
        :disabled="islimit"
        style="margin-bottom: 16px"
        placeholder="为此用户设定权限 0-2"
        v-model="sign.limit"
      >
        <template #prepend>权限等级</template>
      </el-input>
      <el-button style="height: 40px" @click="changeLimit" size="mini"
        >自定义</el-button
      >
    </div>
    <el-input
      style="margin-bottom: 16px"
      placeholder="请输入你的联系方式"
      v-model="sign.tel"
    >
      <template #prepend>电话号码</template>
    </el-input>
    <el-input
      style="margin-bottom: 16px"
      placeholder="请输入你的电子邮箱"
      v-model="sign.email"
    >
      <template #prepend>邮箱</template>
    </el-input>
    <el-button style="width: 100%" @click="confirmSign" plain>提 交</el-button>
  </div>
</template>

<script>
import { toRefs } from 'vue';
import userAddJS from "./userAdd.js";

export default {
  name: "useradd",
  setup() {
    let {
      status,
      methodFun: { confirmSign, changeLimit },
    } = userAddJS();
  let { sign, userinfo, islimit } = toRefs(status);
    return {
      sign,
      userinfo,
      islimit,
      confirmSign,
      changeLimit,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 500px !important;
  height: auto !important;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ff1493;
  border-radius: 16px;
  box-shadow: 1px 2px 10px 2px #ff5cad;
  .header {
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #ff5cad;
    margin-bottom: 20px;
  }
}
</style>
